<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="style/fjol_style.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="style/xol_style.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
   		
    </script>
	</head>
	<style>
		#segmentedControls .mui-control-item {
				line-height: 40px;
				width: 100%;
			}
	</style>
	<body>
		<span class="dn" id="bgZhezhao" style="position: fixed; top: 100px; bottom: 0; width: 100%; background: rgba(0,0,0,0.3); z-index: 1;"></span>
	
		<header class="mui-bar mui-bar-nav p0 newbgRed">
		    <!--<h1 class="mui-title">经纪人</h1>-->
		    <div class="mui-input-row mui-search pct80" style="margin: 0 auto;">
		        <input id="openSearchPage" type="search" class="mui-input-clear" placeholder="请输入经纪人姓名进行搜索" style="background: white; border-radius: 20px;">
		    </div>
		<div class="bg-white">
		    
		    <!--<div class="mui-row" style="background: #DDDDDD;">
		        <input type="search" name="" id="openSearchPage" value=""style="width: 80%; border: none;background: #DDDDDD;" placeholder="请输入经纪人姓名进行搜索" />
		        <span id="searchAgent" class="mui-text-center"style="width: 16%; display: inline-block;">
		        	搜索
		        </span>
		    </div>-->
		    
		
			<div class="fj-house-tab rel pb5" style="border-bottom: 1px solid #ddd;">
			<div class="mui-segmented-control bg-white p10">
		          <a class="mui-control-item mui-text-center chooseArea">区域</a>
		          <a class="mui-control-item tab-a mui-text-right"><b class="down-triangle ml2"></b></a>
		      </div>

		      	
		      <div class="fj-house-tab-div abs" style="z-index: 9;">
		      	
		      	<div class="mui-row mui-hidden house-tab-ul bg-white">
	      	        <div class="bg-white p10" style=" max-height: 300px; overflow-y: auto;">
						<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							<a class="mui-control-item mui-text-left" id="allArea" href="">
			  	                 不限
			  	            </a>
						</div>
					</div>
					<div id="segmentedControlContents" class="mui-col-xs-8" style="border-left: 1px solid #c8c7cc; max-height: 300px; overflow-y: auto;">
						<div class="mui-control-content mui-active">
						</div>
					</div>
	      	    </div>
		      	    
		      	           
		      </div>
		   </div>
		   </div>
		</header>
		
		<div class="mui-content rel" style="top: 40px; bottom: 85px;">
		    <div class="mui-scroll-wrapper" style="overflow: initial;">
		        <div class="mui-scroll" id="refreshContainer">
		            <!--这里放置真实显示的DOM内容-->
		            <div class="" id="houselist">
		               
		            </div>
		        </div>
		    </div>
		    
		</div>
		
		
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/network.js"></script>
		<script src="js/fj_area_util.js"></script>
		<script src="js/fj_base_data.js"></script>
		<script src="js/xzx.open.js"></script>
		<script id="areaTmpl" type="text/x-jquery-tmpl">
  	            <a class="mui-control-item mui-text-left" id="${identId}">
  	                 ${areaName}
  	            </a>
		</script>
		<script id="houseListTmpl" type="text/x-jquery-tmpl">
			<div class="agentList flex p10 pt5">
		        <div class="flexCell bre agentDetail" id="${userId}">
		        	<div class="flex">
		        		{{if headImgUrl}}
			            <img class="mui-pull-left mr5 circle" width="60" height="60" src="${headImgUrl}">
			            {{else}}
			            <img class="mui-pull-left mr5 circle" width="60" height="60" src="images/icon_default_header@2x.png">
			            {{/if}}
			            <div class="flexCell">
			                <span>${realname}</span>
			                <p class="f08">${area}</p>
			            </div>
		        	</div>
		        	<div class="flex mui-text-center f08 mt5" style="align-items: flex-start;">
		        		<div class="flexCell bre">
		        			<p class="f10">已服务人数</p>
		        			<h4 class="newRed">${serviceTotal}</h4>
		        		</div>
		        		<div class="flexCell bre">
		        			<p class="f10">在售套数</p>
		        			<h4 class="newRed">${secondHouseCount}</h4>
		        		</div>
		        		<div class="flexCell">
		        			<p class="f10">服务评价</p>
		        			<span>
	        				{{each $item.agentStarFull()}}
		                	<i data-index='0' class="mui-icon mui-icon-star-filled"></i>
		                	{{/each}}
		                	{{if $item.agentStarHalf()}}
							<i data-index='1' class="mui-icon mui-icon-starhalf"></i>
							{{/if}}
							{{each $item.agentStar()}}
							<i data-index='2' class="mui-icon mui-icon-star"></i>
							{{/each}}
	        				</span>
		        		</div>
		        	</div>
		        </div>
		        <div class="agentMobile" data-mobile='${mobile}'>
		        	<img src="imageNew/icon_agent_call_whit@2x.png" width="80"/>
		        </div>
		    </div>
		</script>
		<script type="text/javascript">
		mui.init({
				pullRefresh:{
					container:"#refreshContainer",
					up:{
						callback:pullupRefresh
					}
				}
		});	
		
			
			var pagevalue =1;
			
			var _listArr,
				 areaIdentId='',
				streetIdentId=0,
				 workYear = 0,
				 searchIpt = '';
			var dataListArr = [];	//存储分页所有数据
			
			function pulldownRefresh(){
				$('.mui-pull').hide();
				setTimeout(function(){
//					console.log(areaIdentId+','+workYear);
					getHouseList(1,true,searchIpt,areaIdentId,workYear);
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
					return pagevalue=1;
				},1000);
			}
			function pullupRefresh(){
				$('.mui-pull').show();
				setTimeout(function(){
//					console.log(areaIdentId+','+workYear);
					pagevalue++;
					getHouseList(pagevalue,false,searchIpt,areaIdentId,workYear);
				},1000);
			}
			
			mui.plusReady(function(){
//				console.log(workYear);
				getHouseList(1,false,searchIpt,areaIdentId,workYear);
				mui('#houselist').on('tap','.agentDetail',function(event){
					event.stopPropagation();
					var _idx = $(this).parent('.agentList').index();
//					console.log(dataListArr.length);
					openWindowWithPage('xol_agent_detail',{
						agentData:dataListArr[_idx]
					});
					
				});
				
				
				mui('#houselist').on('tap','.agentMobile',function(event){
					event.stopPropagation();
					var mobile = $(this).data('mobile');
					console.log(mobile);
					var btnArray = ['拨打', '取消'];
					mui.confirm('是否拨打' + mobile + '?', '提示', btnArray, function(e) {
						if(e.index == 0) {
							plus.device.dial(mobile, false);
						}
					});
				});
				/*
				 * 选择区域
				 * */
				var currentCity = areaUtils.getCurrentCityChileAreaList();
//				console.log(JSON.stringify(currentCity));
				$('#areaTmpl').tmpl(currentCity).appendTo('#segmentedControls');
				
				var html = [];
				var contents = document.getElementById("segmentedControlContents");
				for (i in currentCity) {
					var finalAreaList = currentCity[i].arrayChildArea;
					html.push('<div id="content' + currentCity[i].id + '" class="mui-control-content"><ul class="mui-table-view">');
					for (j in finalAreaList) {
						html.push('<li class="mui-table-view-cell" id="'+finalAreaList[j].id+'">' + finalAreaList[j].areaName + '</li>');
					}
					html.push('</ul></div>');					
				}
				contents.innerHTML = html.join('');
				mui('#segmentedControls').on('tap','a',function(){	//选择区域
					pagevalue =1;
					dataListArr = [];	//清空分页数据列表
					areaIdentId = this.getAttribute('id');
					var idx = $(this).index();
					$('.mui-pull').hide();
					if(areaIdentId=='allArea'){		//不限区域
						areaIdentId = '';
						$('.mui-segmented-control .chooseArea').text('区域');
					}else{
						areaIdentId = this.getAttribute('id');
						$('.mui-segmented-control .chooseArea').text(this.text);
					}
					
//					console.log(areaIdentId+','+workYear+','+searchIpt);
					getHouseList(pagevalue, true, searchIpt, areaIdentId, workYear);////////////////
					$(this).parents('.house-tab-ul').addClass('mui-hidden');
					$('#bgZhezhao').hide();
					
				});		
				
				/*
				 * 搜索框搜索事件
				 * */
				document.querySelector('#openSearchPage').addEventListener('keyup',function(e){
					pagevalue =1;
					searchIpt = this.value;
					dataListArr = [];
			        getHouseList(pagevalue,true,searchIpt,areaIdentId,workYear);
				},false);
				document.querySelector('#openSearchPage').addEventListener('keydown',function(e){
					pagevalue =1;
					if(13 == e.keyCode){ //点击了“搜索”  
			           document.activeElement.blur();//隐藏软键盘 
			           searchIpt = $(this).val();
			           console.log(searchIpt);
			           dataListArr = [];
			           getHouseList(pagevalue,true,searchIpt,areaIdentId,workYear);
			        } 
			    },false); 
//			    document.querySelector('#searchAgent').addEventListener('tap',function(){
//			    	pagevalue =1;
//			    	searchIpt = document.querySelector('#openSearchPage').value;
//			    	console.log(searchIpt);
//			        dataListArr = [];
//			    	getHouseList(pagevalue,true,searchIpt,areaIdentId,workYear);
//			    });
			});
			
			function getHouseList(pagevalue,isTrue,searchIpt,areaIdentId,workYear){
				
				var param = [{
					key:'searchKey',
					value:searchIpt
				},{
					key:'areaIdentId',
					value:areaIdentId
				},{
					key:'workYear',
					value:workYear
				},{
					key:'page',
					value:pagevalue
				},{
					key:'rows',
					value:10
				}];
				fjNetwork.get('fjzx/common/search-saleman.json',param,function(data){
					console.log(JSON.stringify(data.rows));
					
					_listArr = data.rows;
					dataListArr = dataListArr.concat(_listArr);	//所有分页数据存储到新数组里面
					if(isTrue){
						document.querySelector('#houselist').innerHTML = '';
						mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
						$('.mui-pull').hide();
					}
					
					$('#houseListTmpl').tmpl(_listArr,{
						getAverageScore:function(){
							var commentScore = this.data.commentScore;	//总分
							var commentTotal = this.data.commentTotal;	//总人数
							if(commentTotal){
								return (commentScore/commentTotal).toFixed(2);
							}else{
								return '暂无评分';
							}
							
						},
						agentStarFull: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var starStr = [];
//						console.log(score);
						starStr.length = parseInt(score);
						return starStr;
					},
					agentStarHalf: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var halfScore = parseInt(score);
						if(halfScore>score){
							return true;
						}else{
							return false;
						}
					},
					agentStar: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var rest = parseInt(5-score);
						var starStr = [];
						starStr.length = parseInt(rest);
						return starStr;
					}
					}).appendTo('#houselist');
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(_listArr.length==0);
					
				},function(msg){
					mui.toast(msg);
				});
			}

	
	document.querySelector('.mui-segmented-control .tab-a').addEventListener('tap',function(){
		var _ul = document.querySelector('.house-tab-ul');
		_ul.classList.toggle('mui-hidden');
		$('#bgZhezhao').toggle();
	});

	
	$('#bgZhezhao').on('click',function(){
		$('.fj-house-tab-div').find('.house-tab-ul').addClass('mui-hidden');
		$(this).hide();
	});

		</script>
	</body>
</html>
